<template>
    <div>
        <div v-if="this.$route.meta.keepAlive">
                <transition name="popup">
                    <keep-alive>
                        <router-view />
                    </keep-alive>
                </transition>
        </div> 
        <div v-if="!this.$route.meta.keepAlive">

        <router-view></router-view>
        <!-- 搜索框 -->
             <van-search v-model="value" placeholder="请输入搜索关键词" shape="round"  @click="fun()" disabled/>
        <!-- /搜索框 -->
        <!-- 分类+ -->
        <div class="bottom" >
             <!-- 分类 -->
                <van-sidebar v-model="activeKey" class="left_tag" @change="onChange">
                    <van-sidebar-item :title="v.name" v-for="(v,k) in categoryList" :key="v.id"/>
                </van-sidebar>
            <!-- /分类 -->
            <!-- 分类图 -->
                <div class="classify_pic" >
                    <div class="top" >
                        <img :src="currentCategory.banner_url" width="96%" alt="" style="filter: brightness(50%);">
                        <h5>{{currentCategory.front_name}}</h5>
                        <!-- <input type="text" ref="inp" v-model="val"> -->
                    </div>
                    
                    <div class="mytitle">
                        <span></span>
                        <h3>{{currentCategory.name}}</h3>
                    </div>
                    <van-grid :column-num="3">
                    <van-grid-item v-for="(v,k) in subCategoryList" :key="v.id" :icon="v.wap_banner_url" :text="v.name" />
                    </van-grid>
                </div>
            <!-- /分类图 -->
        </div>
        <!-- /分类+ -->
        </div>
        
    </div>
</template>

<script>
import { classifyList,classifyCurrent } from '../request/classify';
import { Toast } from 'vant';
export default {
    name: 'Wjm0714Classify',

    data() {
        return {
            activeKey: 0,
            value:'',
            categoryList:[],
            id:"1005000",
            currentCategory:{},
            subCategoryList:[],
            val:"123123"
        };
    },

    methods:{
        // 搜索
        fun(){
            this.$router.push('/classify/popup');
        },
        // 左侧分类
        onChange(index){
            this.id = this.categoryList[index].id;
        }
    },
    created(){
        // 加载
        Toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        });
        classifyList()
        .then(res=>{
            this.categoryList = res.data.data.categoryList;
        }).catch(err=>{
            console.log(err);
        })
    },
    watch:{
        id:{
            handler(newv,oldv){
                // console.log(this.$refs.inp.value);
                console.log(newv);
                classifyCurrent(newv)
                .then(res=>{
                    this.currentCategory = res.data.data.currentCategory,
                    this.subCategoryList = res.data.data.currentCategory.subCategoryList
                })
                .catch(err=>{
                    console.log(err);
                })
            },
            immediate:true
        },
        
    },
    mounted(){
        // console.log(this.$refs.inp.value);
    }
};
</script>

<style lang="less" >
    body,html{
        background-color: #fff;
    }
    // 分类 
    .bottom{
        display: flex;
        flex-wrap: nowrap;
    }
    // 分类右侧
    .classify_pic{
        width: 85%;
        background-color: #fff;
        font-family: 黑体;
        
        .top{
            position: relative;
            img{
                margin:0 2%;
                border-radius: 3%;
                box-shadow: 0  0 10px rgba(0,0,0,0.6);
            }
            h5{
                font-size: .14rem;
                position: absolute;
                left: 50%;
                top: 50%;
                color: #fff;
                transform: translate(-50%,-50%);
            }
        }
        
        .mytitle{
            height: .5rem;
            width: 100%;
            // background-color: lightblue;
            position: relative;
                h3{
                    width: .9rem;
                    height: .4rem;
                    line-height: .4rem;
                    font-size: .16rem;
                    text-align: center;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -.45rem;
                    margin-top: -.2rem;
                    background-color: #fff;
                }
                span{
                    display: block;
                    width: 1.5rem;
                    height: .02rem;
                    background-color: #ccc;
                     position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -.75rem;
                    margin-top: -.01rem;
                }
        }
        
    }
    .van-sidebar-item{
        width: 100%;
        height: .60rem;
    }
    // 路由动画
    .popup-enter{
        top: 0%;
        right: -100%;
    }
    .popup-enter-active{
        transition: all 1s;
    }
    .popup-enter-to{
        top: 0%;
        right: 0%;
    }
</style>